<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px">
			<el-form-item label="活动标题" prop="activityName">
				<el-input v-model="queryParams.activityName" placeholder="请输入活动标题" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="创建人" prop="createBy" v-hasRole="['admin']">
				<el-input v-model="queryParams.createBy" placeholder="请输入创建人" clearable @keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="活动类型" prop="activityType">
				<el-select v-model="queryParams.activityType" placeholder="请选择活动类型" clearable>
					<el-option v-for="dict in dict.type.event_type" :key="dict.value" :label="dict.label" :value="dict.value" />
				</el-select>
			</el-form-item>

			<el-form-item label="活动开始时间" prop="startTime">
				<el-date-picker clearable v-model="queryParams.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" placeholder="请选择活动开始时间"></el-date-picker>
			</el-form-item>
			<el-form-item label="活动结束时间" prop="endTime">
				<el-date-picker clearable v-model="queryParams.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" placeholder="请选择活动结束时间"></el-date-picker>
			</el-form-item>
			<!-- <el-form-item label="审批状态" prop="isPublic">
        <el-select v-model="queryParams.isPublic" placeholder="请选择审批状态" clearable>
          <el-option
            v-for="dict in dict.type.approval_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">
					搜索
				</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['apm:activity:add']">
					新增
				</el-button>
			</el-col>
			<!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['apm:activity:edit']"
        >修改</el-button>
      </el-col> -->
			<el-col :span="1.5">
				<el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['apm:activity:remove']">
					删除
				</el-button>
			</el-col>
			<el-col :span="1.5">
				<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['apm:activity:export']">
					导出
				</el-button>
			</el-col>
			<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
		</el-row>

		<el-table v-loading="loading" :data="activityList" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="活动编号" align="center" prop="activityId" />
			<el-table-column label="活动标题" align="center" prop="activityName" />
			<el-table-column label="是否置顶" align="center" prop="isTop">
				<template slot-scope="scope">
					{{ scope.row.isTop ? '是' : '否' }}
				</template>
			</el-table-column>
			<el-table-column label="活动类型" align="center" prop="activityType">
				<template slot-scope="scope">
					<dict-tag :options="dict.type.event_type" :value="scope.row.activityType" />
				</template>
			</el-table-column>
			<el-table-column label="活动开始时间" align="center" prop="startTime" width="180">
				<!-- <template slot-scope="scope">
					<span>{{ parseTime(scope.row.startTime, '{y}-{m}-{d} {h}:{m}') }}</span>
				</template> -->
			</el-table-column>
			<el-table-column label="活动结束时间" align="center" prop="endTime" width="180">
				<!-- <template slot-scope="scope">
					<span>{{ parseTime(scope.row.endTime, '{y}-{m}-{d} {h}:{m}') }}</span>
				</template> -->
			</el-table-column>
			<!-- <el-table-column label="审批状态" align="center" prop="isPublic">
        <template slot-scope="scope">
          <dict-tag :options="dict.type.approval_status" :value="scope.row.isPublic"/>
        </template>
      </el-table-column> -->
			<el-table-column label="封面" align="center" prop="activityFile" width="100">
				<template slot-scope="scope">
					<image-preview :src="scope.row.activityFile" :width="50" :height="50" />
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-view" @click="handleUpdate(scope.row)" v-hasPermi="['apm:activity:edit']">
						编辑
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-view" @click="handleOpen(scope.row, 2)" v-hasPermi="['apm:activity:edit']">
						到场记录
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-view" @click="openQRCode(scope.row)" v-hasPermi="['apm:activity:edit']">
						二维码
					</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['apm:activity:remove']">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 添加或修改活动对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false">
			<el-form ref="form" :model="form" :rules="rules" label-width="120px" class="flexForm" :disabled="openType == 2">
				<el-form-item label="活动标题" prop="activityName" class="w50">
					<el-input v-model="form.activityName" placeholder="请输入活动标题" />
				</el-form-item>

				<el-form-item label="活动积分" prop="activityScore" class="w50">
					<el-input-number v-model="form.activityScore" controls-position="right" :min="1" :step="1" step-strictly placeholder="请输入活动积分"></el-input-number>
				</el-form-item>
				<el-form-item label="活动人数上限" prop="activityNumber" class="w50">
					<el-input-number v-model="form.activityNumber" controls-position="right" :min="1" :step="1" step-strictly placeholder="请输活动人数上限"></el-input-number>
				</el-form-item>

				<el-form-item label="活动开始时间" prop="startTime" class="w50">
					<el-date-picker clearable v-model="form.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" placeholder="请选择活动开始时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="活动结束时间" prop="endTime" class="w50">
					<el-date-picker clearable v-model="form.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" placeholder="请选择活动结束时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="报名开始时间" prop="enrollStartTime" class="w50">
					<el-date-picker clearable v-model="form.enrollStartTime" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" placeholder="请选择报名开始时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="报名结束时间" prop="enrollEndTime" class="w50">
					<el-date-picker clearable v-model="form.enrollEndTime" type="datetime" value-format="yyyy-MM-dd HH:mm" format="yyyy-MM-dd HH:mm" placeholder="请选择报名结束时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="活动类型" prop="activityType" class="w50">
					<el-select v-model="form.activityType" placeholder="请选择活动类型">
						<el-option v-for="dict in dict.type.event_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="报名表单" v-if="form.activityType != 1" prop="fromId" class="w50">
					<el-select v-model="form.fromId" placeholder="请选择表单">
						<el-option v-for="item in formList" :key="item.formId" :label="item.formName" :value="item.formId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="form.activityType == 1 ? '调查问卷' : '打卡表单'" prop="cardId" class="w50" v-if="form.activityType == 1">
					<el-select v-model="form.cardId" placeholder="请选择表单">
						<el-option v-for="item in formList" :key="item.formId" :label="item.formName" :value="item.formId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="是否置顶" prop="isTop" class="w50">
					<el-switch active-text="是" v-model="form.isTop" inactive-text="否"></el-switch>
				</el-form-item>
				<el-form-item label="封面" prop="activityFile" class="w100">
					<image-upload :disabled="openType == 2" v-model="form.activityFile" />
				</el-form-item>
				<el-form-item label="活动描述" class="w100">
					<editor v-if="open" v-model="form.remark" :min-height="192" :readOnly="openType == 2" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm" v-if="openType != 2">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
		<QRCode ref="QRCode"></QRCode>
		<el-dialog title="到场记录" :visible.sync="open1" width="800px" append-to-body :close-on-click-modal="false">
			<activityList ref="activityListRef"></activityList>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	listActivity,
	getActivity,
	delActivity,
	addActivity,
	updateActivity
} from '@/api/apm/activity'
import QRCode from '@/components/QRCode'
import activityList from '@/components/activityList'
import { listForm } from '@/api/flowable/form'
export default {
	name: 'Activity',
	dicts: ['event_type', 'approval_status', 'elite_type', 'sys_yes_no'],
	components: { QRCode, activityList },
	data() {
		return {
			openType: 1,
			// 遮罩层
			loading: true,
			// 选中数组
			ids: [],
			// 非单个禁用
			single: true,
			// 非多个禁用
			multiple: true,
			// 显示搜索条件
			showSearch: true,
			// 总条数
			total: 0,
			// 活动表格数据
			activityList: [],
			// 弹出层标题
			title: '',
			// 是否显示弹出层
			open: false,
			open1: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: 10,
				activityName: null,
				activityType: null,
				address: null,
				startTime: null,
				endTime: null,

				activityFile: null
			},
			// 表单参数
			form: {},
			// 表单校验
			rules: {
				activityName: [{ required: true, message: '活动标题不能为空', trigger: 'blur' }],
				remark: [{ required: true, message: '活动描述不能为空', trigger: 'blur' }],
				source: [{ required: true, message: '活动来源不能为空', trigger: 'blur' }],
				activityType: [{ required: true, message: '活动类型不能为空', trigger: 'change' }],
				eliteType: [{ required: true, message: '人才层次不能为空', trigger: 'change' }],
				startTime: [{ required: true, message: '活动开始时间不能为空', trigger: 'blur' }],
				endTime: [{ required: true, message: '活动结束时间不能为空', trigger: 'blur' }],
				activityNumber: [{ required: true, message: '活动人数不能为空', trigger: 'blur' }],
				enrollStartTime: [{ required: true, message: '报名开始时间不能为空', trigger: 'blur' }],
				enrollEndTime: [{ required: true, message: '报名结束时间不能为空', trigger: 'blur' }],
				activityFile: [{ required: true, message: '封面不能为空', trigger: 'blur' }],
				fromId: [{ required: true, message: '表单不能为空', trigger: 'change' }],
				cardId: [{ required: true, message: '表单不能为空', trigger: 'change' }],
				activityScore: [{ required: true, message: '活动积分不能为空', trigger: 'blur' }],
				isAudit: [{ required: true, message: '选择是否需要审核', trigger: 'change' }],
				isVisitor: [{ required: true, message: '选择是否需要审核', trigger: 'change' }],
				isLimit: [{ required: true, message: '选择是否限制人数', trigger: 'change' }]
			},
			formList: {},
			formQueryParams: {
				pageNum: 1,
				pageSize: 10
			}
		}
	},
	created() {
		this.queryParams.createBy = this.$store.getters.name
		this.getList()
		this.ListFormDeploy()
	},
	methods: {
		openQRCode(item) {
			const url = `https://test2.wzheiying.com:333/move/pages/activity/activityInfo/activityInfo?id=${item.activityId}`
			this.$refs.QRCode.open(url)
		},
		/** 挂载表单列表 */
		ListFormDeploy() {
			listForm().then((res) => {
				this.formList = res.rows
				// this.formTotal = res.total;
				// this.formDeployOpen = true;
				// this.formDeployTitle = "挂载表单";
			})
		},
		/** 查询活动列表 */
		getList() {
			this.loading = true
			listActivity(this.queryParams).then((response) => {
				this.activityList = response.rows
				this.total = response.total
				this.loading = false
			})
		},
		// 取消按钮
		cancel() {
			this.open = false
			this.open1 = false
			this.reset()
		},
		// 表单重置
		reset() {
			this.form = {
				activityId: null,
				activityName: null,
				remark: null,
				activityType: null,
				startTime: null,
				endTime: null,
				activityFile: null,
				createBy: this.$store.getters.name,
				createTime: null,
				updateBy: null,
				updateTime: null,
				activityScore: 1,
				isAudit: false,
				isVisitor: false,
				isLimit: false
			}
			this.resetForm('form')
		},
		/** 搜索按钮操作 */
		handleQuery() {
			this.queryParams.pageNum = 1
			this.getList()
		},
		/** 重置按钮操作 */
		resetQuery() {
			this.resetForm('queryForm')
			this.handleQuery()
		},
		// 多选框选中数据
		handleSelectionChange(selection) {
			this.ids = selection.map((item) => item.activityId)
			this.single = selection.length !== 1
			this.multiple = !selection.length
		},
		handleOpen(row, openType = 2) {
			this.open1 = true
			this.openType = openType
			this.$nextTick(() => {
				this.$refs.activityListRef.setInit(row)
			})
		},
		/** 新增按钮操作 */
		handleAdd() {
			this.reset()
			this.openType = 1
			this.open = true
			this.title = '添加活动'
		},
		/** 修改按钮操作 */
		handleUpdate(row, openType) {
			this.openType = openType
			this.reset()
			const activityId = row.activityId || this.ids
			getActivity(activityId).then((response) => {
				this.form = response.data
				this.open = true
				this.title = '修改活动'
			})
		},
		/** 提交按钮 */
		submitForm() {
			if (this.form.activityType == 1) {
				this.form.formId = ''
			}
			this.form.isLimit = true
			this.$refs['form'].validate((valid) => {
				if (valid) {
					const params = JSON.parse(JSON.stringify(this.form))
					if (this.form.activityId != null) {
						updateActivity(params).then((response) => {
							this.$modal.msgSuccess('修改成功')
							this.open = false
							this.getList()
						})
					} else {
						addActivity(params).then((response) => {
							this.$modal.msgSuccess('新增成功')
							this.open = false
							this.getList()
						})
					}
				}
			})
		},
		/** 删除按钮操作 */
		handleDelete(row) {
			const activityIds = row.activityId || this.ids
			this.$modal
				.confirm('是否确认删除活动编号为"' + activityIds + '"的数据项？')
				.then(function () {
					return delActivity(activityIds)
				})
				.then(() => {
					this.getList()
					this.$modal.msgSuccess('删除成功')
				})
				.catch(() => {})
		},
		/** 导出按钮操作 */
		handleExport() {
			this.download(
				'apm/activity/export',
				{
					...this.queryParams
				},
				`activity_${new Date().getTime()}.xlsx`
			)
		}
	}
}
</script>
